$(function () {
  /* 
  1 页面数据动态渲染
  2 点击菜单 内容跟着切换
    1 左侧菜单激活选中
    2 右侧的内容跟着变化 
      1 先获取被点击的li标签的索引
  3 先实现rem 
    rem 单位 相对长度单位 相对于页面的根元素 html标签的fontsize
    步骤：
      1 通过一段js 根据屏幕的宽度动态设置html标签的字体大小 + 媒体查询来实现 
      2 基础值 100px 
      3 实现标签的时候 把要动态变大小的标签的单位改成百分比，rem 
        字体  => rem 
        width rem 百分比
        padding rem 
        border 。。。
  4 弹簧效果 + 点击置顶效果  iscroll.js
    1 介绍 类似 京东分类页面
      左侧和右侧都有弹簧 左侧点击置顶。。
    2 iscroll.js
      1 引入对应的js文件
      2 再加入一段初始js
        只有容器元素的第一个子元素可以滚动其他被忽略
      3 思考一下css需要修改 ？？？
        1 把原生滚动条 隐藏 
        2 必须要等到标签都生成了再去做初始化
        3 要只有容器元素的第一个资源可以滚动其他被忽略  注意！！！！！
  5 正在等待图标效果 在数据还没有加载回来 在页面上显示一个小图标
    1 找一张图片 菊花图.gif 最简单 

    1.5 字体图标来实现  给body加一个class   给body移除一个class 隐藏 
    2 图片 开始加载 显示  发送ajax之前  给body加一个class
      拦截器
    3 图片 加载完毕 隐藏  获取ajax回调  给body移除一个class 隐藏 
      拦截器？？？

  6 缓存
    1 本地存储
      1 会话存储  sesstionStorage
        生命周期：浏览器关闭了 就不存在
      2 永久存储  localStorage
        生命周期：除非手动删除否则一直存在
      3 共同点：
        1 存放的是 字符串 
        2 API
          获取  sesstionStorage.getItem(key)
          设置  sesstionStorage.setItem(key,val)
          删除单个 sesstionStorage.removeItem(key)
          清空所有 sesstionStorage.clear()
        3 重点
          1 设置值的时候 都会把数据类型先转成字符串类型进行存储
            1 =》 “1”  true =>"true"
          2 复杂类型 对象 会导致数据丢失？？？
            var obj={name:"小红"};  直接调用 setItem("name",obj);
            [object object]
          3 先把对象转成json字符串再进行存储
          4 获取旧的数据的时候 先把字符串 解析成对象

    2 实现缓存的思路
      0 优化一下代码 
        1 页面上显示的数据 
          1 发送请求获取
          2 获取本地存储中旧的数据 
      1 先判断永久存储有没有数据（接口返回值）
      2 没有 发送请求拿新的数据
      3 有 使用以前旧的数据 就不用发送请求了 
          判断数据是否过期了
            没有过期 直接渲染页面了
            过期     重新发送请求  加载数据 

    7 出现一个渐变的效果   hide().fadeIn()

   */




  // 全局变量 存放数据
  // 发送请求回来之后的 data属性 
  var Datas = [];
  // 左侧的滚动条
  var LeftScroll;

  init();


  function init() {
    setHTML();
    
    
    // getCategories();
    renderMain();
    eventList();
  
  }


  // 要绑定事件的代码
  function eventList() {
    //  给左侧的菜单绑定点击事件click tap
    // 给动态生成的标签绑定事件的时候 要注意  
    // 1 使用委托的方式绑定
    // 2 必须要等等标签都生成了再绑定 
    $(".left").on("tap", "ul li", function () {

      $(this).addClass("active").siblings().removeClass("active");


      var index = $(this).index();
      // 渲染右侧的内容
      // 渲染右侧的内容
      var rightDatas = Datas[index].children;
      renderRight(rightDatas);

      // 点击dom元素的 使用滚动条置顶 
      LeftScroll.scrollToElement(this);
    })


    // 屏幕的宽度改变
    // 屏幕大小变化的情况 不存在于真实的手机中
    // 为了方便我们自己去调试而已！！！
    window.onresize = function () {
      setHTML();
    }


  }


  // 渲染页面
  function renderMain() {
    /* 
    1 先判断永久存储有没数据 
      有 渲染页面
      没有数据 发送请求 渲染页面 
     */
    // getCategories();

    // 获取本地存储中的数据
    var localDatasStr = localStorage.getItem("Cate");
    // 判断是否存在
    if (localDatasStr) {
      // 获取本地存储中的数据 obj
      var localObj = JSON.parse(localDatasStr);

      // 判断时间是否过期了 自定义 1天
      if (Date.now() - localObj.time > 1000 * 60 * 60 * 24) {
        // if (Date.now() - localObj.time > 1000 * 5) {
        // 过期了 
        getCategories();
      } else {
        // 没有过期 可以直接去使用
        // 重新给Datas赋值
        Datas = localObj.data;
        // 存在
        renderLeft();
        var rightDatas = Datas[0].children;
        renderRight(rightDatas);
      }

    } else {
      // 不存在
      getCategories();
    }

  }


  // 获取分类数据
  function getCategories() {

    // 显示正在等待
    // $("body").addClass("wait");

    $.get("categories", function (ret) {
      //  console.log(ret);

      // 隐藏图标
      // $("body").removeClass("wait");

      if (ret.meta.status == 200) {
        Datas = ret.data;
        // 把数据存入永久存储中 先转成json字符串
        var cateObj = {
          // Date.now() 返回1970 1 1 到现在的毫秒 
          time: Date.now(),
          data: Datas
        };
        localStorage.setItem("Cate", JSON.stringify(cateObj));


        renderLeft();
        // 渲染右侧的内容
        var rightDatas = Datas[0].children;
        renderRight(rightDatas);

      }

    })

  }


  // 渲染左侧
  function renderLeft() {
    // 渲染左侧的菜单
    var html = template("leftTpl", {
      data: Datas
    });
    $(".left ul").html(html);
    // 初始化左侧的滚动条
  
    LeftScroll = new IScroll(".left");

  }

  //  渲染右侧的内容
  // arrs 要循环显示的参数
  function renderRight(arrs) {
    // 渲染右侧的内容

    var rightHtml = template("rightTpl", {
      data: arrs
    });
    $(".right").html(rightHtml).hide().fadeIn(2000);
    /* 
    1 对于图片标签
      1 标签都生成了 内容就一定有了吗？？？ 高度？？？？
    
     */

    // 初始化右侧的滚动条  要等到标签生成和高度都固定了 
    //  必须要等到图片都加载完毕了才去调用！！！！ onload 图片加载完毕之后就会触发 
    // 必须要等到 最后一张图片(不是指索引，而是指自然加载完毕的顺序？ 随机。。。 ) 加载完毕了 再去调用！！！

    // 获取所有图片的长度
    var imgLength = $(".right img").length;

    $(".right img").on("load", function () {
      imgLength--;

      if (imgLength == 0) {
        // 最后一张被加载完毕了！！！

        var rightScroll = new IScroll(".right");
      }

    })


  }


  // 用来设置rem使用
  function setHTML() {
    // 基础值
    var baseVal = 100;
    // 设计稿的宽度
    var pageWidth = 375;
    // 要适配的屏幕的宽度?
    var screenWidth = document.querySelector("html").offsetWidth;
    // 要设置的fontsize
    var fontsize = screenWidth * baseVal / pageWidth;
    // 设置到html标签的中
    document.querySelector("html").style.fontSize = fontsize + "px";
  }
})